<template>
	<view class="application_box">
		<nav-bar title="订单评价" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="assess_box" v-for="(item, index) in goodsList" :key="index">
			<view class="applicate_box">
				<image class="img_box" :src="item.goodsImg" mode="aspectFill"></image>
				<view class="title_box">
					<view class="title">{{ item.goodsName }}</view>
					<view class="score_box">
						<text>商品评分 :</text>
						<view class="score" v-for="(childItem, childIndex) in scoreList" :key="childIndex" @click="onScore(index, childItem)">
							<image v-if="item.score >= childItem" src="../../../static/icon/evaluation_star1.png" mode="aspectFill"></image>
							<image v-else src="../../../static/icon/evaluation_star2.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 输入框 -->
			<view class="input_box">
				<textarea class="textarea" v-model="item.content" placeholder="亲，说点什么吧，你的评价对其他买家很有帮助哦~" maxlength="255"></textarea>
				<view class="upload_box">
					<view class="upload_img" v-for="(childItem, childIndex) in item.imgs" :key="childIndex">
						<image mode="aspectFill" :src="childItem"></image>
						<text class="delete" @click="onDelete(index, childIndex)"></text>
					</view>
					<view class="upload_but" v-if="item.imgs.length < 6" @click="onImgsUpload(index)">+</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn_box"><button class="submit" @click="onSubmit">提交</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderNo: '',
			goodsList: [],
			scoreList:[1,2,3,4,5]
		};
	},
	//第一次加载
	onLoad(e) {
		if (e.orderNo) {
			this.orderNo = e.orderNo;
		}
		this.getData();
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onScore(index, childItem){
			this.goodsList[index].score = childItem;
		},
		// 获得数据
		getData() {
			this.$http.get('api/order/mall/v1/order_info', { orderNo: this.orderNo }).then(data => {
				let goodsList = [];
				data.goodsList.forEach(item => {
					goodsList.push({
						...item,
						score:5,
						content:"",
						imgs:[]
					});
				});
				this.goodsList = goodsList;
			});
		},
		//上传图片
		onImgsUpload(index) {
			let item = this.goodsList[index];
			var count = 6 - item.imgs.length;
			this.$http.qnImgUpload({ count: count }).then(res => {
				this.goodsList[index].imgs = this.goodsList[index].imgs.concat(res);
			});
		},
		// 删除照片
		onDelete(index, childIndex) {
			this.goodsList[index].imgs.splice(childIndex, 1);
		},
		// 提交评价
		onSubmit() {
			let state = true;
			let comments = [];
			for (let item of this.goodsList) {
				if (item.score === 0) {
					state = false;
					uni.showToast({
						title: '请选择评分',
						icon: 'none'
					});
					break;
				} else {
					let data = {
						goodsId: item.goodsId,
						goodsSpecId: item.goodsSpecId,
						score: item.score
					};
					if (item.content) {
						data.content = item.content;
					}
					if (item.imgs.length > 0) {
						data.imgs = item.imgs;
					}
					comments.push(data);
				}
			}
			if (state) {
				this.$http
					.post('api/order/v1/mall_comment', {
						orderNo: this.orderNo,
						comments: comments
					})
					.then(data => {
						uni.showToast({
							title: '评价成功!',
							icon: 'none'
						});
						uni.navigateBack();
					});
			}
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.application_box {
	padding: 20rpx 30rpx;
	.assess_box {
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		.applicate_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.img_box {
				height: 120rpx;
				width: 120rpx;
			}
			.title_box {
				margin-left: 30rpx;
				display: flex;
				align-content: space-around;
				align-items: center;
				flex-direction: column;

				.title {
					width: 100%;
					color: #333333;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}
				.score_box {
					text {
						color: #333333;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
					display: flex;
					width: 100%;
					flex-direction: row;
					.score {
						display: flex;
						image {
							width: 34rpx;
							height: 34rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
		}
		.input_box {
			min-height: 300rpx;
			background-color: #fff;
			border: solid 1rpx #e5e5e5;
			margin-top: 30rpx;
			.textarea {
				resize: none;
				width: 100%;
				height: 142rpx;
				background-color: inherit;
				padding: 0 30rpx;
				margin: 30rpx 0 0;
				font-size: 28rpx;
				&::-webkit-input-placeholder {
					color: rgba(208, 208, 208, 0.8);
					font-size: 24rpx;
				}
			}
			.upload_box {
				padding: 30rpx 30rpx 20rpx;
				display: flex;
				flex-wrap: wrap;
				.upload_img {
					position: relative;
					margin-right: 60rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					image {
						width: 120rpx;
						height: 120rpx;
					}
					text {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						width: 40rpx;
						height: 40rpx;
						@include bis('../../../static/icon/icon_guanbi.png', 100% 100%);
					}
				}
				.upload_but {
					width: 120rpx;
					height: 120rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 3rpx dashed #cccccc;
					font-size: 80rpx;
					line-height: 77rpx;
					color: #cccccc;
					position: relative;
					overflow: hidden;
					border-radius: 10rpx;
					color: #cccccc;
					font-size: 100rpx;
					font-weight: 100;
					input {
						position: absolute;
						left: 0px;
						top: 0px;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}
	}
	.btn_box {
		position: fixed;
		left: 0;
		bottom: 30rpx;
		right: 0;
		margin: 116rpx 30rpx 0;

		.submit {
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: $themeColor;
			border-radius: 6rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}
}
</style>
